<template>
    <div class="container">
        <div class="d-flex align-items-baseline pt-4">
            <img style="width:32px" class="rounded"
                src="https://ui-web-log-1310478966.cos.ap-guangzhou.myqcloud.com/logo003.png" alt="">
            <div class="h1 fw-bold ms-2">ECharts</div>
        </div>
        <div class="mt-2 text-black-50 ">
            一个基于 JavaScript 的开源可视化图表库。您可以访问他的
            <a class="text-info" href="https://echarts.apache.org/zh/index.html" target="_blank">文档官网</a>
            查看详情。本站内容简单记录其安装和使用过程。<br>
            案例由"vite": "^2.9.15","echarts": "^5.3.3","vue": "^3.2.25"的基本使用,仅供参考学习，如有错误请点击右下角操作盘提交错误。
            <div class="text-primary mt-2  border-bottom">编写时间：2022/ 9/26</div>
        </div>
        <!-- 卡片 -->
        <div class="h5 mt-4">
            基本案例
        </div>
        <div class="row mt-2">
            <div class=" col-sm-6 col-lg-3 mt-2" v-for="(item,index) in cardList" :key="index">
                <div class="card">
                    <img class="p-2" style="height: 190px; object-fit: cover;" :src="item.image" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">{{item.title}}</h5>
                        <p class="card-text overhiddenThree">{{item.text}}</p>
                        <div class="w-100 text-end">
                            <button type="button" class="btn btn-outline-success px-3 btn-sm "
                                @click="seeEX(item.see)">查看示例</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="h5 mt-4">
            安装
        </div>
        <highlightjs language='bash' code="npm install echarts --save" />
        <div class="h5 mt-4">
            项目中按需引入，在utils或者plugins目录下新建echarts/index.ts,内容为下
        </div>
        <highlightjs language='bash' code="
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入图表类型，图表后缀都为 Chart
import {
    BarChart,
    LineChart,
    PieChart,
    ScatterChart,
    MapChart,
} from 'echarts/charts';
// 引入提示框，标题，直角坐标系等组件，组件后缀都为 Component
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    VisualMapComponent,
    ToolboxComponent
} from 'echarts/components';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { SVGRenderer, } from 'echarts/renderers';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { color } from 'echarts/core';
// 将以上引入的组件使用use()方法注册
echarts.use([
    TitleComponent, TooltipComponent, GridComponent, LegendComponent, 
    BarChart,LineChart, PieChart, ScatterChart, 
    SVGRenderer, MapChart, VisualMapComponent, ToolboxComponent
]);

// 导出
export default echarts;" />
        <div class="h5 mt-4">
            在Vue中使用,以下内容渲染了一个条形统计图的基本使用内容，更多属性配置请访问 <a href="https://echarts.apache.org/zh/option.html"
                class="text-info">option配置文档</a>和<a href="https://echarts.apache.org/examples/zh/index.html"
                class="text-info">示例文档</a>
        </div>
        <highlightjs language='JavaScript' code='<template>
    <div style="height:300px;width:400px;" ref="box1"></div>
    <!-- 在html模板中给定ref属性，图表宽高 -->
</template>
<script setup lang="ts">
    import { echarts }from "~src/utils/echarts/index";//引入上一步我们写好并导出的echarts。
    const box1: any = ref(null);//绑定div
    const option= { //创建一个对象设置图表的样式和数据
        tooltip: {},
        legend: {
            top: 0,
            right: 30,
            data: ["销量1", "销量2"]
        },
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [
            {
                name: "销量1",
                type: "bar",
                color: "#EE6666",
                data: [5, 20, 36, 1, 10, 20]
            },
            {
                name: "销量2",
                type: "bar",
                color: "#FAC858",
                data: [26, 24, 45, 22, 23, 20,],
                stack: "xl2"
            },
            {
                name: "销量2",
                type: "bar",
                color: "#3BA272",
                data: [3, 4, 8, 2, 3, 1,],
                stack: "xl2",
            }
        ]
    };
    //在这个生命周期dom元素加载完了才开始渲染，否则获取不到dom元素
    onMounted(() => {
        const boxinit1 = echarts.init(box1.value) //图表初始化
        boxinit1.showLoading();//图表加载
        boxinit1.setOption(option);//设置图表
        boxinit1.hideLoading(); //隐藏图表
    })
</script>' />
        <div v-if="pupShow">
            <popupWindow @closepup="closepup">
                <component :is="showType=='InfoYiqing'?InfoYiqing:BaseChart"></component>
            </popupWindow>
        </div>
        <operationPanel></operationPanel>
    </div>
    <!-- 悬浮操作 -->
</template>

<script setup lang="ts">
import InfoYiqing from './InfoYiqing.vue'
import BaseChart from './BaseChart.vue'
import { ref } from 'vue';


// 获取dom


// 数据
const cardList = [
    {
        image: 'https://ui-web-log-1310478966.cos.ap-guangzhou.myqcloud.com/chart4.jpg',
        title: '国内疫情数据',
        text: '本案例展示了国内各个地区的疫情情况，以及地图展示。数据图与国家卫健委官网发布一致，每日更新一次，每次更新至前一日...',
        see: 'InfoYiqing'
    },
    {
        image: 'https://ui-web-log-1310478966.cos.ap-guangzhou.myqcloud.com/chart3.jpg',
        title: '基本图表使用案例',
        text: '本案例展示了Echats基本图表的使用案例，包括条形统计图，折现统计图，饼图以及散点图等等...',
        see: 'CHART2'
    },
    {
        image: 'https://ui-web-log-1310478966.cos.ap-guangzhou.myqcloud.com/chart4.jpg',
        title: '国内疫情数据',
        text: '本案例展示了国内各个地区的疫情情况，以及地图展示。数据图与国家卫健委官网发布一致，每日更新一次，每次更新至前一日...',
        see: 'CHART1'
    },
    {
        image: 'https://ui-web-log-1310478966.cos.ap-guangzhou.myqcloud.com/chart4.jpg',
        title: '国内疫情数据',
        text: '本案例展示了国内各个地区的疫情情况，以及地图展示。数据图与国家卫健委官网发布一致，每日更新一次，每次更新至前一日...',
        see: 'CHART1'
    },
]
let pupShow: any = ref()
pupShow.value = false
// 弹窗
let showType = ref()

// 方法
const closepup = () => {
    pupShow.value = false
}
const seeEX = (val: string) => {
    showType.value = val
    pupShow.value = true
}
</script>
<style scoped lang='scss'>
.container {
    .infoBlock {
        margin-top: 20px;
        display: flex;
        flex-wrap: nowrap;


    }

    .overhiddenThree {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3; // 控制多行的行数
        -webkit-box-orient: vertical;
    }

}
</style>